<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索组件 -->
      <search-choice @labellist="labellist" @addsearch="addsearch" />

      <!-- 搜索内容 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="待审核" name="0" />
        <el-tab-pane label="已审核" name="1" />
        <el-tab-pane label="已拒绝" name="2" />
      </el-tabs>
      <!-- 提示警告 -->
      <el-alert
        :title="'数据一共'+counts+'条'"
        type="info"
        show-icon
      />

      <!-- 表格数据 -->
      <el-table
        :data="items"
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="150"
        />
        <el-table-column
          prop="subjectID"
          label="学科"
          width="120"
        >
          <template slot-scope="scope">
            {{ format(labellists,scope.row.subjectID) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="catalogID"
          label="目录"
          width="120"
        >
          <template slot-scope="scope">
            {{ catalog(scope.row.catalogID) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="120"
        >
          <template slot-scope="scope">
            {{ format(questionType,scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="300"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="120"
        >
          <template slot-scope="scope">
            {{ addDate(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="120"
        >
          <template slot-scope="scope">
            {{ format(difficulty,scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120"
        />
        <el-table-column
          prop="chkState"
          label="审核状态"
          width="120"
        >
          <template slot-scope="scope">
            {{ format(chkType,scope.row.chkState) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="120"
        />
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="120"
        />
        <el-table-column
          prop="publishState"
          label="发布状态"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.chkState===0?"待发布":format(publishType,scope.row.publishState) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="preview(scope.row.id)">预览</el-button>
            <el-button type="text" size="small" :disabled="scope.row.chkState!==0" @click="dialogID(scope.row.id)">审核</el-button>
            <el-button type="text" size="small" :disabled="scope.row.publishState===1" @click="$router.push(`/questions/new?User=${scope.row.id}`)">修改</el-button>
            <el-button type="text" size="small" :disabled="scope.row.chkState!==1" @click="handleClick(scope.row)">{{ scope.row.publishState===1?'下架':'上架' }}</el-button>
            <el-button type="text" size="small" :disabled="scope.row.publishState===1" @click="deltopic(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 详情弹出层 -->
      <el-dialog
        title="题目预览"
        :visible="dialogVisible"
        width="45%"
        @close="dialog"
      >
        <questions-preview ref="dialog" :topic-id="topicId" @closures="dialogVisible=false" />
      </el-dialog>

      <!-- 审核弹出层 -->
      <el-dialog
        title="题目审核"
        width="25%"
        :visible.sync="dialogs"
      >
        <template>
          <el-radio v-model="form.chkState" :label="1">通过</el-radio>
          <el-radio v-model="form.chkState" :label="2">拒绝</el-radio>
          <el-form>
            <el-form-item>
              <el-input v-model="form.chkRemarks" type="textarea" style="width:100%" placeholder="请输入审核意见" />
            </el-form-item>
          </el-form>
          <el-button @click="butcancel">取 消</el-button>
          <el-button type="primary" @click="auditAdd">确 定</el-button>
        </template>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
// 搜索组件导入
import SearchChoice from '../components/choice-search.vue'
// 预览框组件导入
import questionsPreview from '../components/questions-previews.vue'
// 导入API
import { choice, choiceCheck, choicePublish, delselection } from '@/api/hmmm/questions'
import { list } from '../../api/hmmm/directorys'

// 导入枚举数据
import { questionType, difficulty, chkType, publishType } from '../../api/hmmm/constants'

// 时间插件
import dayjs from 'dayjs'

export default {
  name: 'Questions',
  components: {
    SearchChoice,
    questionsPreview
  },
  data() {
    return {

      form: {
        // 表单域
        chkRemarks: '',
        // 审核状态ID
        chkState: 1,
        id: ''
      },

      // 获取题干ID
      topicId: null,
      // 弹窗框
      dialogs: false,
      dialogVisible: false,

      // tab栏
      activeName: 'first',
      // 审核状态枚举
      publishType,
      // 审核状态枚举
      chkType,
      // 题型枚举
      questionType,
      // 难度枚举
      difficulty,

      currentPage: 1,
      // 全部数据个数
      counts: 0,
      // 页码个数
      query: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        chkState: null
      },
      // 精选题目数据
      items: [],
      // 学科列表
      labellists: [],
      // 目录列表
      list: []
    }
  },
  created() {
    this.choice()
    this.lists()
  },
  methods: {
    // 点击预览数据回显
    preview(i) {
      this.dialogVisible = true
      this.topicId = i
    },

    // 上下架
    handleClick(row) {
      this.$confirm(row.publishState === 1 ? '是否确认下架题目?' : '是否确认上架题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (row.publishState === 1) {
          await choicePublish({ id: row.id, publishState: 0 })
        } else {
          await choicePublish({ id: row.id, publishState: 1 })
        }
        this.$message({
          type: 'success',
          message: row.publishState === 1 ? '下架成功!' : '上架成功!'
        })
        this.choice()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: row.publishState === 1 ? '已取消下架' : '已取消上架'
        })
      })
    },

    // TAB栏切换
    async tabClick(i) {
      if (String(i.name) !== 'first') {
        this.query.chkState = i.name
        this.choice()
      } else {
        this.query.chkState = null
        const res = await choice(this.query)
        this.query.page = res.data.page
        this.query.pagesize = res.data.pagesize
        this.counts = res.data.counts
        this.items = res.data.items
      }
    },

    // 每页条数改变触发
    handleSizeChange(i) {
      this.query.pagesize = i
      this.choice()
    },

    // 页码改变触发
    handleCurrentChange(i) {
      this.query.page = i
      this.choice()
    },

    // 精选题库列表API
    async choice() {
      const res = await choice(this.query)
      this.query.page = res.data.page
      this.query.pagesize = res.data.pagesize
      this.counts = res.data.counts
      this.items = res.data.items
    },

    // 获取学科列表
    labellist(data) {
      this.labellists = data
    },

    // 目录列表
    async  lists() {
      const res = await list({ page: 1, pagesize: 100 })
      this.list = res.data.items
    },

    // 格式化目录数据
    catalog(i) {
      const res = this.list.filter(item => item.id === i)
      return Object.assign({}, res[0]).directoryName
    },

    // 格式化学科数据
    // 难度枚举
    // 审核状态枚举
    // 题型枚举
    // 格式化题型
    format(val, i) {
      const res = val.filter(item => item.value === Number(i))
      return Object.assign({}, res[0]).label
    },

    // 格式化时间
    addDate(time) {
      if (!time) return
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },

    // 搜索功能
    async addsearch(i) {
      if (i) {
        this.query.subjectID = i
        this.choice()
      } else {
        this.query.subjectID = null
        const res = await choice(this.query)
        this.query.page = res.data.page
        this.query.pagesize = res.data.pagesize
        this.counts = res.data.counts
        this.items = res.data.items
      }
    },

    // 取消审核
    butcancel() {
      this.dialogs = false
      this.form = {
        // 表单域
        chkRemarks: '',
        // 审核状态ID
        chkState: 1
      }
    },

    // 获取ID
    dialogID(i) {
      this.dialogs = true
      this.form.id = i
    },

    // 添加审核
    async auditAdd() {
      console.log(1)
      if (!this.form.chkRemarks) {
        this.$message({
          message: '审核意见不能为空',
          type: 'warning'
        })
        return
      }
      await choiceCheck(this.form)
      if (this.form.chkState === 1) {
        await choicePublish({ id: this.form.id, publishState: 1 })
      }
      this.$message({
        message: '审核成功',
        type: 'success'
      })
      this.choice()
      this.dialogs = false
      this.form = {
        // 表单域
        chkRemarks: '',
        // 审核状态ID
        chkState: 1
      }
    },

    // 删除
    deltopic(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delselection({ id })
        this.choice()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    dialog() {
      this.$refs.dialog.closure()
    }

  }

}
</script>

<style scoped>
 .container{
  padding: 10px 10px;
}
.el-col.el-col-2 {
    padding-left: 40px;
}
.el-pagination {
    text-align: end;
    margin-top: 20px;
}
.el-alert.el-alert--info.is-light {
    margin-bottom: 15px;
}
.has-gutter {
    color: #909399;
}
form.el-form {
    margin-top: 30px;
}
button.el-button.el-button--default.el-button--medium {
    margin-left: 130px;
}

</style>
